<template>
	<div class="view-wrap">
		<!-- 保证只有一个transtion组件， 否则动画会出问题 -->
		<!-- <transition :name="transitionName" mode="out-in">  -->
			<keep-alive>
				<router-view v-if="$route.meta.keepAlive"></router-view>
			</keep-alive>
		<!-- </transition> -->

		<!-- <transition :name="transitionName" mode="out-in">  -->
			<router-view v-if="!$route.meta.keepAlive"></router-view> 
		<!-- </transition> -->
 
	</div>
</template>

<script> 
	import { mapGetters, mapState } from 'vuex'

	export default { 
		data() {
			return {
				transitionName: 'router-fade'
			}
		}, 

		computed: {
			// ...mapGetters(['transitionName']),

			...mapState({
				componentArray: state => state.aliveComponent.name,
			})			
		}
	}
</script>

<style lang="scss" scoped>

	.router-fade-enter, .router-fade-leave-to {
		opacity: 0;
	}

	.router-fade-enter-active, .router-fade-leave-active { 
		transition: opacity 0s;
	}

	.router-fade-enter-to, .router-fade-leave {
		opacity: 1;
	}


 	.route-forward-enter,
	.route-back-leave-to { 
		transform: translateX(100%);
	}

	.route-forward-enter-to,
	.route-back-enter-to {

		transform: translateX(0%); 
	}

	.route-forward-leave,
	.route-back-leave { 
		transform: translateX(0%); 
	}

	.route-forward-leave-to,
	.route-back-enter { 
		transform: translateX(-100%); 
	}

	.route-forward-enter-active,
	.route-back-enter-active { 
		position: absolute;
		width: 100%; 
		min-height: 100vh;
		z-index: 100;
		transition: transform .3s;
	}

	.route-forward-leave-active,
	.route-back-leave-active {
		position: absolute;
		width: 100%; 
		min-height: 100vh;
		z-index: 100;
		transition: transform .3s;
	}

	.view-wrap {
		height: 100%;
	}

</style>